<template>
	<view class="content">
		<u-navbar title="意见反馈" :bg-color="`${mainColor}`" fixed placeholder autoBack :height="navigationBarHeight"
			:title-style="{color:`${textColor}`, fontSize:'16px', fontWeight:700}"
			:left-icon-color="`${textColor}`"
			v-if="showTitle"/>
		<view class="content-page">
			<view style="background-color: #fff;padding: 10px;">
				<textarea :value="content" @input="contentChanged" :maxlength="maxlength" class="content-input"
					placeholder="献上您的宝贵意见，让淘京收变的更好~" auto-focus :show-count="false"></textarea>
				<view :class="{count: true, error: content.length >= maxlength}">
					{{content.length}}/{{maxlength}}
				</view>
			</view>
			
			<view class="item flex-a">
				+86
				<input :value="phone" @change="phoneChanged" placeholder="请输入您的手机号码(非必填)" class="input-class"/>
			</view>
			
			<view class="item">
				<view class="title">反馈类型</view>
				<view class="tags">
					<u-button v-for="(item, index) in types" :key="index" type="primary"
						:color="type.id == item.id ? `${mainColor}` : '#999'"
						plain style="width: 80px;height: 30px;padding: 0;margin: 0;"
						@click="clickType(item)">{{item.label}}</u-button>
				</view>
			</view>
		</view>
		<view class="fix-bottm" :style="{bottom:`${bottomHeight}px`}">
			<u-button :color="`${mainColor}`" shape="circle" @click="doSubmit"
				:custom-style="{color: `${textColor}`}">提交</u-button>
		</view>
	</view>
</template>

<script>
	import { baseUrl, feedback, uploadImage } from '@/api';
	import { systemInfo } from '@/utils/mixin';

	export default {
		mixins: [systemInfo],
		data() {
			return {
				baseUrl,
				maxlength: 500,
				content: '',
				phone: '',
				types: [
					{id: 1, label: '意见反馈'},
					{id: 2, label: '功能建议'}
				],
				type: {
					id: 1
				}
			}
		},
		onLoad() {
			this.getSystemInfo();
		},
		methods: {
			contentChanged({detail}) {
				this.content = detail.value.trim();
			},
			phoneChanged({detail}) {
				this.phone = detail.value.trim();
			},
			clickType(item) {
				this.type = item;
			},
			async doSubmit() {
				if (this.content.length == 0) {
					this.notify('反馈内容不能为空！');
					return
				}
				
				if (this.phone.length > 0) {
					if (this.tel.length < 11 || !/^1[3-9][0-9]{9}$/.test(this.tel)) {
						this.notify('手机号码格式不正确！');
						return
					}
				} else {
					this.phone = null;
				}
				
				const res = await feedback(this.content, this.phone, this.type.id);
				if (res.code === 2000) {
					this.setToast('反馈成功，感谢您的反馈~');
					uni.navigateBack();
				}
			},
			notify(message) {
				uni.showToast({
					icon:'none',
					title:message
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content-page {
		background-color: #f9f9f9;
		
		.content-input {
			width: 100%;
			height: 200px; 
			background-color: #fff;
		}

		.count {
			text-align: end;
			font-size: 14px;
			color: #666;
		}

		.error {
			color: #f56c6c;
		}
		
		.item {
			margin-top: 10px;
			background-color: #fff;
			padding: 16px 10px;
			
			.title {
				font-size: 16px;
				font-weight: bold;
			}
			
			.input-class {
				width: 100%;
				margin-left: 10px;
			}
			
			.tags {
				display: flex;
				justify-content: start;
				margin-top: 16px;
				gap: 10px;
			}
		}
	}
	
	.fix-bottm {
	    position: fixed;
	    bottom: 0;
		left: 0;
		right: 0;
	    padding: 10px;
	    box-sizing: border-box;
		background-color: #fff;
	}
</style>